<template>
    <div style="width: 100%;height: 560px">
        <el-tooltip
            effect="dark"
            :content="tooltipContent"
            placement="top"
        >
            <el-button
                style="margin-bottom: 15px"
                type="primary"
                icon="el-icon-picture-outline-round"
                circle
                @click="changeViewData"
            />
        </el-tooltip>

        <el-select
            v-if=!isView
            v-model="proId"
            filterable
            style="width: 360px"
            clearable
            @change="getPro"
            placeholder="试试搜索吧~">
            <el-option-group
                v-for="group in proOptions"
                :key="group.professionalTypeName"
                :label="group.professionalTypeName">
                <el-option
                    v-for="item in group.professions"
                    :key="item.proName"
                    :label="item.proName"
                    :value="item.proId">
                </el-option>
            </el-option-group>
        </el-select>

        <el-select
            v-if=isView
            v-model="classId"
            style="width: 360px"
            filterable
            @change="getClass"
            clearable
            placeholder="试试搜索吧~">
            <el-option
                v-for="item in classOptions"
                :key="item.className"
                :label="item.className"
                :value="item.classId">
            </el-option>
        </el-select>

        <v-chart
            :options="polar"
            autoresize
            id="sexRatio"
            ref="sexRatioRef"
            style="height: 90%;width: 100%"
        ></v-chart>
    </div>
</template>

<script>
    export default {
        name: 'SalaryList',
        data () {
            return {
                polar: {},
                isView: true,
                placeholder: '试试搜索专业名称吧',
                tooltipContent: '切换到班级数据显示',
                cascaderOptions: [], // 专业班级联动菜单数据
                cascaderValues: [], // 专业班级联动菜单值
                classOptions: [],
                proOptions: [],
                classId: '',
                proId: '',
                type: 'getPro', // 获取数据的类型,
                bodyMax: 0,
                girlNum: 0,
                boyNum: 0,
                isWatch: true
            }
        },
        created () {
            this.getProfessionAndClassesDataCascaderOptions()
            this.getProfessionAndClassesLevelDataCascaderOptions()
            this.getSalaryData()
        },
        methods: {
            changeViewData () {
                // true就是专业，false就是班级
                if (this.isView) {
                    this.isView = false
                    this.placeholder = '试试搜索班级名吧'
                    this.tooltipContent = '切换到专业数据显示'
                    this.type = 'getPro'
                    this.getSalaryData()
                } else {
                    this.isView = true
                    this.placeholder = '试试搜索专业名吧'
                    this.tooltipContent = '切换到班级数据显示'
                    this.type = 'getClass'
                    this.getSalaryData()
                }
            },
            getPro () {
                let self = this
                self.type = 'getPro'
                self.getSalaryData()
            },
            getClass () {
                let self = this
                self.type = 'getClass'
                self.getSalaryData()
            },
            /** 获取专业 */
            getProfessionAndClassesDataCascaderOptions () {
                let self = this
                self.utils.sendReq({
                    queryUrl: 'professionalType/queryAll',
                    req: {
                        method: 'get',
                        success: function (req) {
                            if (req.data.code === 200) {
                                self.proOptions = req.data.data
                            }
                        }
                    }
                })
            },

            /** 获取班级 */
            getProfessionAndClassesLevelDataCascaderOptions () {
                let self = this
                self.utils.sendReq({
                    queryUrl: 'classRoom/queryAll',
                    req: {
                        method: 'get',
                        success: function (req) {
                            if (req.data.code === 200) {
                                self.classOptions = req.data.data
                            }
                        }
                    }
                })
            },
            /** 获取工资数据 */
            async getSalaryData () {
                let self = this
                let data = {}
                data.classId = ''
                data.proId = ''
                var bodyMax = 0 // 指定图形界限的值(总人数)
                var boyNum = 0 // 男孩数量
                var girlNum = 0 // 女孩数量
                let type = this.type
                if (type === 'getPro') {
                    data.proId = this.proId
                }
                if (type === 'getClass') {
                    data.classId = this.classId
                }
                // 名称列表
                var nameList = ''
                // 对应值列表
                var valueList = ''

                var maxList = ''

                var minList = ''
                // 提交表单
                const result = await this.$http.post('/data/getSalary', data)
                // 判断业务逻辑
                if (result.data.code === 200) {
                    nameList = result.data.data[0]
                    valueList = result.data.data[1]
                    maxList = result.data.data[2]
                    minList = result.data.data[3]
                }

                /**
                 * 数据显示
                 */
                var colorArray = [
                    { top: '#ffa800', bottom: 'rgba(11,42,84,.3)' },
                    { top: '#1ace4a', bottom: 'rgba(11,42,84, 0.3)' },
                    { top: '#4bf3ff', bottom: 'rgba(11,42,84,.3)' },
                    { top: '#4f9aff', bottom: 'rgba(11,42,84,.3)' },
                    { top: '#b250ff', bottom: 'rgba(11,42,84,.3)' }
                ]
                var option = {
                    title: {
                        text: '薪资情况条形图',
                        x: 'center',
                        textStyle: {
                            color: 'rgb(255,255,255)',
                            fontFamily: '等线',
                            fontSize: 18
                        },
                        subtextStyle: {
                            fontSize: 15,
                            fontFamily: '等线'
                        }
                    },
                    backgroundColor: '#0E2A43',
                    // tooltip: {
                    //     show: true,
                    //     formatter (data) {
                    //         return `平均薪资：${valueList}<br/>最高薪资：${maxList}<br/>最低薪资：${minList}`
                    //     }
                    // },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '5%',
                        top: '12%',
                        // right: '1%',
                        bottom: '8%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        show: false,
                        position: 'top',
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        splitLine: {
                            show: false
                        }
                    },
                    yAxis: [{
                        type: 'category',
                        axisTick: {
                            show: false,
                            alignWithLabel: false,
                            length: 5
                        },
                        splitLine: { // 网格线
                            show: false
                        },
                        inverse: 'true', // 排序
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        data: nameList
                    }
                    ],
                    series: [{
                        name: '年度平均工资',
                        type: 'bar',
                        label: {
                            normal: {
                                show: true,
                                position: 'right',
                                formatter: '{c}',
                                textStyle: {
                                    color: 'white' // color of value
                                }
                            }
                        },
                        itemStyle: {
                            normal: {
                                show: true,
                                color: function (params) {
                                    const num = colorArray.length
                                    return {
                                        type: 'linear',
                                        colorStops: [{
                                            offset: 0,
                                            color: colorArray[params.dataIndex % num].bottom
                                        }, {
                                            offset: 1,
                                            color: colorArray[params.dataIndex % num].top
                                        }, {
                                            offset: 0,
                                            color: colorArray[params.dataIndex % num].bottom
                                        }, {
                                            offset: 1,
                                            color: colorArray[params.dataIndex % num].top
                                        }, {
                                            offset: 0,
                                            color: colorArray[params.dataIndex % num].bottom
                                        }, {
                                            offset: 1,
                                            color: colorArray[params.dataIndex % num].top
                                        }, {
                                            offset: 0,
                                            color: colorArray[params.dataIndex % num].bottom
                                        }, {
                                            offset: 1,
                                            color: colorArray[params.dataIndex % num].top
                                        }, {
                                            offset: 0,
                                            color: colorArray[params.dataIndex % num].bottom
                                        }, {
                                            offset: 1,
                                            color: colorArray[params.dataIndex % num].top
                                        }, {
                                            offset: 0,
                                            color: colorArray[params.dataIndex % num].bottom
                                        }, {
                                            offset: 1,
                                            color: colorArray[params.dataIndex % num].top
                                        }]
                                        // globalCoord: false
                                    }
                                },
                                barBorderRadius: 70,
                                borderWidth: 0,
                                borderColor: '#333'
                            }
                        },
                        barGap: '0%',
                        barCategoryGap: '50%',
                        data: valueList
                    }]
                }
                // 清除上一次的数据重新绘制(避免造成绘制错误)

                this.polar = option

            }
        }

    }
</script>

<style lang="less" scoped>
    /deep/ .echarts {
        > div {
            border-radius: 25px;
        }
    }
</style>
